<template>
  <div style="padding:30px; width:50%; margin:0 auto">
    <el-form ref="form" :model="form" label-width="80px" label-position="left">
      <el-form-item label="物资名称">
        <el-select v-model="form.materialsName" placeholder="请选择" value-key="value" @change="getMaterialName">
            <el-option
              v-for="item in options"
              :key="item.myId"
              :label="item.name + ' [' + item.model + ']'"
              :value="item"
            />
          </el-select>
      </el-form-item>
      <el-form-item label="生产厂家">
        {{ form.materialsManufacturer }}
      </el-form-item>
      <el-form-item label="单价">
        <el-input v-model="form.materialsPrice" :disabled="true">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="库存数量">
        <el-input v-model="total" :disabled="true">
          <template slot="append">个</template>
        </el-input>
      </el-form-item>
      <el-form-item label="领用数量">
        <el-input v-model="form.outAmount" @input="getAggregate">
          <template slot="append">个</template>
        </el-input>
      </el-form-item>
      <el-form-item label="部门名称">
        <el-select v-model="form.outDepartment" placeholder="请选择" value-key="value" @change="getOutDepartment">
            <el-option
              v-for="item in departmentOptions"
              :key="item.myId"
              :label="item.name"
              :value="item"
            />
          </el-select>
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="form.principal"></el-input>
      </el-form-item>
      <el-form-item label="合计金额">
        <el-input v-model="form.aggregate" :disabled="true">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="操作员">
        <el-input v-model="form.operator" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getAllMaterialsVo, submitOutForm } from "@/api/outform"
  import { getDepartmentList } from "@/api/department"
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['name']),
    },
    data() {
      return {
        form: {
          materialsName: '',
          materialsManufacturer: '',
          materialsPrice: 0,
          outDepartment: '',
          outAmount: 0,
          principal: '',
          operator: '',
          aggregate: 0,
          status: 2
        },
        total: 0,
        options: [],
        departmentOptions: [],
        saveObj: {}
      }
    },
    created() {
      this.getAllMaterialsVo()
      this.getDepartmentList()
      this.form.operator = this.name
    },
    methods: {
      // 获取物资列表
      async getAllMaterialsVo() {
        let res = await getAllMaterialsVo()
        console.log(res.data.data)
        this.options = res.data.data
      },

      // 获取部门列表
      async getDepartmentList() {
        let res = await getDepartmentList({"current": "0", "size": "5"})
        console.log(res.data.data.items)
        this.departmentOptions = res.data.data.items
      },

      // 选择物资名称
      getMaterialName(e) {
        console.log(e)
        this.form.materialsName = e.name + ' [' + e.model + ']'
        this.form.materialsManufacturer = e.manufacturer
        this.form.materialsPrice = e.price
        this.total = e.total
      },

      // 选择部门名称
      getOutDepartment(e) {
        console.log(e)
        this.form.outDepartment = e.name
      },

      getAggregate() {
        this.form.aggregate = this.form.materialsPrice * this.form.outAmount
        this.total = this.total - this.form.outAmount
      },

      // 获取保存的时间
      getTimeDate() {
        return new Date().getTime();
      },

      async onSubmit() {
        this.form.materialsPrice = this.form.materialsPrice.toString()
        this.form.outAmount = Number(this.form.outAmount)
        this.form.date = this.getTimeDate()
        console.log(this.form);
        let res = await submitOutForm(this.form) 
        console.log(res)
        this.$message({
          message: '保存成功',
          type: 'success'
        });
      }
    }
  }
</script>